.category-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28px;
  color: #333;
  background-color: #ffffff;
  padding: 20px 20px;
  .category-item {
    display: flex;
    align-items: center;
    &.active {
      color: #e7495d;
      font-weight: bold;
    }
  }
}

.drawer-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .drawer-content {
    flex: 1;
    height: 0;
    .item {
      padding: 20px;
      border-bottom: 1px solid #e1e1e1;
      .title {
        margin-bottom: 20px;
      }
      .content {
        display: flex;
        align-items: center;
        .mini-input {
          width: 100px;
          border: 1px solid #e1e1e1;
          padding: 0;
          border-radius: 10px;
          margin-left: 0;
          text-align: center;
        }
        .space {
          margin: 0 20px;
        }
      }
      .span-wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .span {
          width: 150px;
          height: 50px;
          line-height: 50px;
          border-radius: 60px;
          color: #999;
          border: 1px solid #e1e1e1;
          text-align: center;
          margin-right: 20px;
          margin-bottom: 20px;
          &.active {
            color: #e7495d;
            border: 1px solid #e7495d;
          }
        }
      }
    }
  }
  .bottom-btn {
    display: flex;
    align-items: center;
    .btn {
      flex: 1;
      font-size: 28px;
      color: #fff;
      border-radius: 60px;
      margin: 30px;
      background-color: #fd486e;
      border: none;
      height: 70px;
      line-height: 70px;
      &.no-bg {
        background-color: #e1e1e1;
      }
    }
  }
}
